   {% extends "base.html" %}

   {% block title %}{% if box %}编辑盲盒{% else %}添加盲盒{% endif %} - 盲盒超市管理系统{% endblock %}

   {% block content %}
   <div class="row">
       <div class="col-12 mb-4">
           <h2 class="border-bottom pb-2">
               <i class="fas {% if box %}fa-edit{% else %}fa-plus-circle{% endif %} me-2"></i>
               {% if box %}编辑盲盒{% else %}添加盲盒{% endif %}
           </h2>
       </div>
   </div>

   <div class="row">
       <div class="col-md-8">
           <div class="card shadow-sm">
               <div class="card-body">
                   <form method="POST" enctype="multipart/form-data">
                       <div class="mb-3">
                           <label for="name" class="form-label">盲盒名称 <span class="text-danger">*</span></label>
                           <input type="text" class="form-control" id="name" name="name" required value="{{ box.name if box else '' }}">
                       </div>
                       
                       <div class="mb-3">
                           <label for="market_id" class="form-label">所属超市 <span class="text-danger">*</span></label>
                           <select class="form-select" id="market_id" name="market_id" required>
                               <option value="">-- 请选择超市 --</option>
                               {% for market in supermarkets %}
                               <option value="{{ market.market_id }}" {% if box and box.market_id == market.market_id %}selected{% endif %}>
                                   {{ market.name }}
                               </option>
                               {% endfor %}
                           </select>
                       </div>
                       
                       <div class="mb-3">
                           <label for="category" class="form-label">商品分类</label>
                           <input type="text" class="form-control" id="category" name="category" value="{{ box.category if box else '' }}">
                       </div>
                       
                       <div class="row">
                           <div class="col-md-4">
                               <div class="mb-3">
                                   <label for="original_price" class="form-label">原价(元)</label>
                                   <input type="number" step="0.01" class="form-control" id="original_price" name="original_price" value="{{ box.original_price if box else '' }}" onchange="calculateDiscount()">
                               </div>
                           </div>
                           <div class="col-md-4">
                               <div class="mb-3">
                                   <label for="discount_price" class="form-label">折扣价(元)</label>
                                   <input type="number" step="0.01" class="form-control" id="discount_price" name="discount_price" value="{{ box.discount_price if box else '' }}" onchange="calculateDiscount()">
                               </div>
                           </div>
                           <div class="col-md-4">
                               <div class="mb-3">
                                   <label for="discount_rate" class="form-label">折扣率</label>
                                   <input type="number" step="0.01" class="form-control" id="discount_rate" name="discount_rate" value="{{ box.discount_rate if box else '' }}" readonly>
                                   <small id="discount_display" class="form-text text-muted"></small>
                               </div>
                           </div>
                       </div>
                       
                       <div class="row">
                           <div class="col-md-6">
                               <div class="mb-3">
                                   <label for="stock" class="form-label">库存数量</label>
                                   <input type="number" class="form-control" id="stock" name="stock" value="{{ box.stock if box else '0' }}">
                               </div>
                           </div>
                           <div class="col-md-6">
                               <div class="mb-3">
                                   <label for="unique_code" class="form-label">唯一编码</label>
                                   <input type="text" class="form-control" id="unique_code" name="unique_code" value="{{ box.unique_code if box else '' }}">
                               </div>
                           </div>
                       </div>
                       
                       <div class="mb-3">
                           <label for="description" class="form-label">详细描述</label>
                           <textarea class="form-control" id="description" name="description" rows="4">{{ box.description if box else '' }}</textarea>
                       </div>
                       
                       <div class="mb-3">
                           <label for="image_url" class="form-label">图片URL</label>
                           <input type="text" class="form-control" id="image_url" name="image_url" value="{{ box.image_url if box else '' }}">
                       </div>
                       
                       <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                           <a href="{{ url_for('blind_box.list') }}" class="btn btn-secondary me-md-2">
                               <i class="fas fa-times me-1"></i>取消
                           </a>
                           <button type="submit" class="btn btn-primary">
                               <i class="fas fa-save me-1"></i>保存
                           </button>
                       </div>
                   </form>
               </div>
           </div>
       </div>
       
       <div class="col-md-4">
           <div class="card shadow-sm">
               <div class="card-header bg-light">
                   <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>提示信息</h5>
               </div>
               <div class="card-body">
                   <p><strong>盲盒名称：</strong>必填，请输入具有描述性的名称</p>
                   <p><strong>所属超市：</strong>必填，指定此盲盒属于哪个超市</p>
                   <p><strong>商品分类：</strong>便于分类管理，如：食品、日用品等</p>
                   <p><strong>价格：</strong>填写原价和折扣价后，折扣率会自动计算</p>
                   <p><strong>图片URL：</strong>输入图片的网络地址，建议尺寸为300x200像素</p>
               </div>
           </div>
       </div>
   </div>
   {% endblock %}

   {% block scripts %}
   <script>
   // 已经在main.js中定义了calculateDiscount函数
   // 页面加载时也计算一次
   document.addEventListener('DOMContentLoaded', function() {
       calculateDiscount();
   });
   </script>
   {% endblock %}